import React, { Component } from 'react';

import { Layout, Menu, Breadcrumb } from 'antd';
import {
  UsergroupAddOutlined,
  SafetyOutlined,
  DislikeOutlined,
  ShoppingCartOutlined,
  RocketOutlined,
  BarsOutlined
} from '@ant-design/icons';
import "./index.css"

import { Route,Redirect } from 'react-router-dom';
/* 引入路由子页面 */
import Categories from '../Categories';
import Goods from '../Goods';
import Orders from '../Orders';
// 分类参数
import Params from '../Params';
import Reports from '../Reports';
import Rights from '../Rights';
import Roles from '../Roles';
import Users from '../Users';

const { Header, Content, Footer, Sider } = Layout;
const { SubMenu } = Menu;

export default class Main extends Component {
  state = {
    collapsed: false,
    chenfeng:"晨锋管理系统",
    /* 菜单栏的数据 */
    menuList:[],
    /* 图标管理 */
    iconList:[
      <UsergroupAddOutlined/>,
      <SafetyOutlined/>,
      <DislikeOutlined/>,
      <ShoppingCartOutlined/>,
      <RocketOutlined/>
    ],
    /* 点击的路由 */
    path:""
  };
  /* 侧边栏的收缩与打开 */
  onCollapse = collapsed => {
    console.log(collapsed,this.state.margin);
    this.setState({ 
      collapsed,
      chenfeng:collapsed?"晨锋":"晨锋管理系统"
     });
  };
  /* 获取左侧菜单栏数据 */
  getMenus = async () =>{
    let result = await this.api.get("menus")
    // console.log(result);
    if(result.meta.status === 200){
      this.setState({
        menuList:result.data
      })
    }
  }
  componentDidMount(){
    /* 调用获取菜单栏函数 */
    this.getMenus()
  }
  /* 跳转子页面 */
  toSubPage(path){
    this.props.history.push(`/main/${path}`)
    this.setState({path})
  }
  render(){
    const { collapsed,chenfeng,menuList,iconList,path } = this.state;
    return (
      <Layout style={{ minHeight: '100vh' }}>
      <Sider collapsible collapsed={collapsed} onCollapse={this.onCollapse}>
        <div className="logo">
          {chenfeng}
        </div>
        <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">
          {
            menuList.map((menu,index1)=>{
              return  <SubMenu key={menu.id} icon={iconList[index1]} title={menu.authName}>
                {
                  menu.children.map(menuSon=>{
                    return <Menu.Item onClick={()=>{this.toSubPage(menuSon.path)}} icon={<BarsOutlined />} key={menuSon.path}>{menuSon.authName}</Menu.Item>
                  })
                }
              </SubMenu>
            })
          }
        </Menu>
      </Sider>
      <Layout className="site-layout">
        <Header className="site-layout-background" style={{ padding: 0 }} >
          
        </Header>
        <Content style={{ margin: '0 16px' }}>
          <Route path={"/main/categories"} component={Categories}></Route>
          <Route path={"/main/goods"} component={Goods}></Route>
          <Route path={"/main/orders"} component={Orders}></Route>
          <Route path={"/main/params"} component={Params}></Route>
          <Route path={"/main/reports"} component={Reports}></Route>
          <Route path={"/main/rights"} component={Rights}></Route>
          <Route path={"/main/roles"} component={Roles}></Route>
          <Route path={"/main/users"} component={Users}></Route>
          <Redirect from='/main' to="/main/params"></Redirect>
        </Content>
        <Footer style={{ textAlign: 'center' }}>晨锋后台管理系统,入侵有奖</Footer>
      </Layout>
    </Layout>

    )
  }
}
